import React, { Component } from "react";
import { Link, Route, HashRouter } from "react-router-dom";
import Found from "../Found/index";
import Recommend from "../Recommend/index";
import New from "../New/index";
import Mv from "../Mv/index";
import "./index.css";

class Home extends Component {
  state = {
    navList: [
      {
        id: 1,
        iconfont: "iconfont ",
        activeColor: true,
        title: "发现音乐",
        path: "/found",
        component: Found,
      },
      {
        id: 2,
        iconfont: "iconfont ",
        activeColor: false,
        title: "推荐音乐",
        path: "/recommend",
        component: Recommend,
      },
      {
        id: 3,
        iconfont: "iconfont ",
        activeColor: false,
        title: "最新音乐",
        path: "/new",
        component: New,
      },
      {
        id: 4,
        iconfont: "iconfont ",
        activeColor: false,
        title: "最新MV",
        path: "/mv",
        component: Mv,
      },
    ],
    // 选中索引
    tabIndex: 1,
    // 搜索框的值
    inputValue: "",
  };
  inputValue = React.createRef();
  // 改变选中高亮
  changeActiveColor = (id) => {
    this.setState({
      tabIndex: id,
    });
  };
  //点击搜索
  handleSearch = (e) => {
    // console.log(e.target);
    const { keyCode, target } = e;
    if (keyCode === 13) {
      this.setState({
        inputValue: target.value.trim(),
      });
    }
  };
  render() {
    const { navList, tabIndex, inputValue } = this.state;
    return (
      <HashRouter>
        <header>
          <input
            type="text"
            defaultValue={inputValue}
            onKeyUp={this.handleSearch}
          />
        </header>
        <div className="home-container">
          {/* 导航栏 */}
          <div className="home-left">
            <ul>
              {navList.map((v) => {
                return (
                  <li key={v.id}>
                    <i className={v.iconfont}></i>
                    <Link
                      className={tabIndex === v.id ? "active" : "#000000"}
                      to={v.path}
                      onClick={() => this.changeActiveColor(v.id)}
                    >
                      {v.title}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
          {/* 内容栏 */}
          <div className="home-right">
            {navList.map((v) => {
              return <Route key={v.id} path={v.path} component={v.component} />;
            })}
          </div>
        </div>
      </HashRouter>
    );
  }
}

export default Home;
